<template>
	<view class="wallet">
		<view class="nav">
			<uni-nav-bar leftWidth="200rpx" :border="false" rightWidth="200rpx" title="收入提现" left-icon="back" @clickLeft="back" backgroundColor="transparent">
				<block slot="right">
					<view class="address" @click="$util.toUrl('/technician/wallet/addbank')">
						<uni-icons type="plus-filled" color="#2E7EFA" :size="20"></uni-icons>
						<text class="hidden" style="flex: 1;">提现账户</text>
					</view>
				</block>
			</uni-nav-bar>
		</view>
		
		<view class="notice">
			<u-icon name="info-circle-fill" color="#C49000" :size="30"></u-icon>
			<view class="notice_box">
				<!-- <u-notice-bar :volume-icon="false" :list="notice" color="#C49000"></u-notice-bar> -->
				{{notice[0]}}
			</view>
		</view>
		
		<view class="box">
			<view class="card">
				<view class="title">乐附近钱包</view>
				<view class="money">
					<view class="tit flex">
						<text>可提现金额</text>
						<i>（冻结金额：{{Number(freeze_price).toFixed(2)}}）</i>
					</view>
					<view class="btn flex_r_between">
						<text>{{Number(price).toFixed(2)}}
						</text>
						<view @click="show = true">提现</view>
					</view>
				</view>
				
				<view class="tag">
					<view class="view1" @click="$util.toUrl('/technician/wallet/turnover')">账户流水</view>
					<view class="view2" @click="$util.toUrl('/technician/wallet/records')">提现记录</view>
				</view>
			</view>
			<!-- <view class="text flex_r_between">
				<text>保证金<i style="color: #FF0000;">¥{{Number(freeze_price).toFixed(0)}}</i></text>
				<view>解冻</view>
			</view> -->
		</view>
		
		
		<view class="policy">
			<view class="title">
				提现规则：
			</view>
			<view class="text" v-html="store_withdrawal">
				
			</view>
		</view>
		
		<u-modal v-model="show" title="请输入提现金额" :z-index="1" @confirm="confirm">
			<view class="slot-content">
				<view class="money_box">
					<text @click="openCalendar">选择日期:{{start_time}} - {{end_time || start_time}}</text>
					<view class="inp">
						<input type="number" v-model="money" />
					</view>
				</view>
			</view>
		</u-modal>
		
		<uni-calendar
		 :start-date="start_time"
		 :end-date="end_time"
		 ref="calendar"
		 class="uni-calendar--hook"
		 :insert="false"
		 :clear-date="true"
		 :range="true"
		@confirm="onCalendar"/>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				notice: [],
				freeze_price:'0.00',
				price:'0.00',
				start_time:'',
				end_time:'',
				
				money:'',
				
				show:false,
				
				withdrawing:null,
				
				sharing_ratio:'0',
				
				store_withdrawal:'',
			}
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			getWithdrawalrule(){
				this.request.httpTokenRequest({
					url: "index/policy",
					method: "GET"
				}, {
					type:"withdrawal"
				}).then(res => {
					if (res.code == 0) {
						this.store_withdrawal = res.data.content
					} else {
						this.$util.msg(res.msg)
					}
				})
			},
			getMoney(){
				this.request.httpTokenRequest({
					url: "technician.bank/getWithdrawable",
					method: "get"
				}, {
					
				}).then(res=> {
					if(res.code == 0){
						this.price = res.data.price
						this.freeze_price = res.data.freeze_price
						this.sharing_ratio = res.data.sharing_ratio
						this.notice = [`商家抽取订单总金额${this.sharing_ratio}%佣金抽成`]
						this.end_time = res.data.start_time
						this.start_time = res.data.end_time
						this.withdrawing = res.data.withdrawing || null
					}
				})
				
			},
			openCalendar(){
				this.$refs.calendar.open();
			},
			onCalendar(e){
				this.start_time = e.range.before
				this.end_time = e.range.after
			},
			confirm(){
				if(Number(this.money) <= 0){ return this.$util.msg('请输入正确的金额') }
				if( !this.start_time ){ return this.$util.msg('请选择提现日期') }
				if(Number(this.money) > this.price){ return this.$util.msg('可提现余额不足') }
				this.request.httpTokenRequest({
					url: "/technician.bank/withdraw",
					method: "POST"
				}, {
					price:this.money,
					start_time:this.start_time,
					end_time:this.end_time || this.start_time
				}).then(res=> {
					this.$util.msg(res.msg)
					if (res.code == 0) {
						this.getMoney()
					} else if(res.code == 9521) {
						this.$util.toUrl('/pages/manage/wallet/addbank')
					}
				})
			},
			
			pushTic(){
				// console.log('提交发票');
			},
		},
		onLoad() {
			this.getMoney()
			this.getWithdrawalrule()
		}
	}
</script>

<style scoped lang="scss">
	.wallet {
		padding: calc(var(--status-bar-height) + 44px) 0 30rpx;
		min-height: 100vh;
	}
	
	.notice {
		background: rgba(247, 181, 0, 0.1);
		display: flex;
		align-items: center;
		padding: 0 30rpx;

		.notice_box {
			flex: 1;
			height: 80rpx;
			line-height: 80rpx;
			color: #C49000;
			padding-left: 10rpx;
		}
	}
	
	.nav {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background-size: 100%;
		z-index: 99;
		padding-top: var(--status-bar-height);
		background: #F5F7F8;

		.address {
			width: 180rpx;
			display: flex;
			align-items: center;
			height: 54rpx;
			background: #FFFFFF;
			border-radius: 27rpx;

			text {
				font-size: 28rpx;
				color: #000000;
				line-height: 40rpx;
				margin-left: 6rpx;
			}
		}


	}

	.card {
		background: url(https://qiniu-cdn.maeiyun.com/imgs/business/wallet_bg.png) 0 0 no-repeat;
		background-size: 100%;
		height: 352rpx;
		padding: 44rpx 30rpx 110rpx 55rpx;
		box-sizing: border-box;
		position: relative;
		.title {
			font-size: 32rpx;
			font-weight: 600;
			color: #FFFFFF;
			line-height: 45rpx;
		}
		.money {
			margin-top: 41rpx;
			.tit {
				text {
					font-size: 26rpx;
					color: #FFFFFF;
					line-height: 37rpx;
				}
				i {
					font-size: 24rpx;
					color: #FFFFFF;
					font-style: normal;
				}
				view {
					width: 160rpx;
					height: 58rpx;
					background: #FFD981;
					border-radius: 34rpx;
					font-size: 28rpx;
					color: #8A6000;
					line-height: 58rpx;
					text-align: center;
				}
			}
			.btn {
				margin-top: 10rpx;
				text {
					font-size: 46rpx;
					font-weight: 600;
					color: #FFFFFF;
					line-height: 65rpx;
					i {
						font-size: 26rpx;
						font-style: normal;
					}
				}
				view {
					width: 160rpx;
					height: 58rpx;
					background: #FFFFFF;
					border-radius: 34rpx;
					text-align: center;
					line-height: 58rpx;
				}
			}
		}
		.tag {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			display: flex;
			align-items: center;
			height: 83rpx;
			view {
				width: 50%;
				box-sizing: border-box;
				height: 60rpx;
				text-align: center;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height:60rpx;
			}
			.view1 {
				border-right: 1rpx solid rgba(255,255,255,.2);
			}
			.view2 {
				
			}
		}
	}
	
	.box {
		margin: 30rpx 30rpx 0;
		background: rgba(42,106,250,0.1);
		border-radius: 10rpx;
		.text {
			padding: 0 30rpx;
			text {
				font-size: 28rpx;
				color: #333333;
				line-height: 80rpx;
				i {
					font-style: normal;
				}
			}
			view {
				font-size: 28rpx;
				color: #2E7EFA;
				line-height: 40rpx;
			}
		}
	}

	.policy {
		background: rgba(255,255,255,.7);
		border-radius: 8rpx;
		margin: 20rpx 30rpx 0;
		padding: 30rpx;
		.title {
			font-size: 28rpx;
			color: #333333;
			line-height: 40rpx;
			margin-bottom: 10rpx;
		}
		.text {
			font-size: 24rpx;
			color: rgba(51,51,51,0.5);
			line-height: 33rpx;
		}
	}

	.money_box {
		padding: 50rpx 30rpx;
		text {
			font-size: 30rpx;
			color: #8E8E8E;
			line-height: 42rpx;
		}
		view {
			background: #F5F7F8;
			border-radius: 14rpx;
			padding: 30rpx;
			margin-top: 20rpx;
			input {
				font-size: 30rpx;
			}
		}
	}

</style>